<template>
  <div class="mineCar_body">
    <!-- 正方形 3D 旋转 -->
    <div class="box_3D">
      <div class="scene">
        <div class="cube">
          <div class="cube__face_h cube__face--front"></div>
          <div class="cube__face_h cube__face--back"></div>
          <div class="cube__face_h cube__face--right"></div>
          <div class="cube__face_h cube__face--left"></div>
          <div class="cube__face cube__face--top"></div>
          <div class="cube__face cube__face--bottom"></div>

          <div class="car_body_bottom"></div>
          <div class="car_body-front"></div>
          <div class="car_body-back"></div>
          <div class="car_body-right"></div>
          <div class="car_body-left"></div>

          <div :class="{hr_front:true,hr_red:hrRed}"></div>
          <div :class="{hr_back:true,hr_red:hrRed}"></div>
          <div :class="{hr_right:true,hr_red:hrRed}"></div>
          <div :class="{hr_left:true,hr_red:hrRed}"></div>

          <div class="cube2__face_h cube2__face--front"></div>
          <div class="cube2__face_h cube2__face--back"></div>
          <div class="cube2__face_h cube2__face--right"></div>
          <div class="cube2__face_h cube2__face--left"></div>
          <div class="cube2__face cube2__face--top"></div>
          <div class="cube2__face cube2__face--bottom"></div>

          <div class="cubeBottom"><div class="cubeBottom_hr"></div></div>
        </div>
      </div>
    </div>

    <!-- 透视地面 -->
    <!-- <div class="mineCar">
      <div class="mineCar_box">
        <div class="mineCar_box_min"></div>
      </div>
    </div> -->

    <!-- 六边形图片 3D 旋转 -->
    <!-- <div class="demo">
      <div class="screenIco">
        <div class="img_code"><img class="img_code_img" src="@/assets/img/img_1.png" /></div>
      </div>
    </div> -->
  </div>
</template>
  
<script>
export default{
  name: "mineCar",
  data() {
    return {
      key:0,
      loading:false,
      timeoutId:null,
    };
  },
  props:{
    hrRed: {
      type: Boolean,
      default: false
    }
  },
  computed: {
  },
  created(){
  },
  mounted() {
      this.fun();
  },
  methods: {
    fun() {
      console.log('矿车');
    },
  },
  beforeDestroy() {
  },
  beforeRouteLeave (to, from, next) {
    next();
  },
  components:{
  },
}
</script>

<style setup scoped lang='scss'>
*{box-sizing: border-box;}
ul, li{
  list-style-type:none;
}
.mineCar_body{
  width: 100%;
  height: 100%;
  /* border: solid 1px #409eff; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.mineCar_box{
  transform: perspective(500px) rotate(0deg) rotateX(70deg) rotateY(0deg);
  .mineCar_box_min{
    width: 160px;
    height: 160px;
    transform: perspective(500px) rotate(45deg) rotateX(0deg) rotateY(0deg);
    background: linear-gradient(0deg, rgba(64, 158, 255, 1), rgba(64, 158, 255, 0.2));
  }
  
  .flash{
    animation-name:mineCar_box_min_flash;
    animation-duration:2s; /* 规定动画完成一个周期所花费的秒或毫秒 */
    animation-timing-function:linear; /* 规定动画的速度曲线。默认是 "ease" */
    animation-delay:0s; /* 规定动画何时开始。默认是 0 */
    animation-iteration-count:infinite; /* 规定动画被播放的次数。默认是 1  循环infinite*/
    animation-direction:normal; /* 规定动画是否在下一周期逆向地播放。默认是 "normal" * alternate/
    animation-play-state:running; /* 规定动画是否正在运行或暂停。默认是 "running" */
    transform: rotate(0deg);
  }
  @keyframes mineCar_box_min_flash{
    0%   {transform: rotate(0deg);}
    50%  {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
  }
}

.demo{
.screenIco{
  position:fixed;
  z-index: 2;
  .img_code{
    position:fixed;
    bottom: 120px;
    right: 50%;
    margin-right: -50px;
    width: 80px;
    height: 80px;
  }
  .img_code_img{
    opacity: .9;
    width: 100%;
    height: 100%;
    left:0px;
    top:0px;
    position: absolute;
    transform: rotateY(0deg);
    animation-name:img_code_img_flash;
    animation-duration:2s; /* 规定动画完成一个周期所花费的秒或毫秒 */
    animation-timing-function:linear; /* 规定动画的速度曲线。默认是 "ease" */
    animation-delay:0s; /* 规定动画何时开始。默认是 0 */
    animation-iteration-count:infinite; /* 规定动画被播放的次数。默认是 1 */
    animation-direction:alternate; /* 规定动画是否在下一周期逆向地播放。默认是 "normal" */
    animation-play-state:running; /* 规定动画是否正在运行或暂停。默认是 "running" */
  }
  @keyframes img_code_img_flash{
    0%   {transform: rotateY(0deg);}
    50%  {transform: rotateY(90deg);}
    100% {transform: rotateY(180deg);}
  }
}
}

.box_3D{
  .scene {
    width: 200px;
    height: 200px;
    perspective: 500px;
    /* border:solid 1px red; */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cube {
    width: 160px;
    height: 160px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(30deg);
    animation: rotate_flash 16s infinite linear;
    @keyframes rotate_flash {
      from { transform: rotateX(-20deg) rotateY(30deg); }
      to { transform: rotateX(-20deg) rotateY(390deg); }
    }
  }
  
  .cube__face {
    position: absolute;
    width: 160px;
    height: 160px;
    background: linear-gradient(30deg, rgba(255, 255, 255, 1), rgb(201, 212, 223));
    border: 2px solid #fff;
  }
  .cube__face_h {
    position: absolute;
    width: 160px;
    height: 20px;
    background: repeating-linear-gradient(45deg, #333333, #333333 5px, #ffc400 5px, #ffc400 10px);
    border: 1px solid #f0f0f0;
  }
  .cube__face--front  { transform: rotateY(  0deg) translateZ(80px); }
  .cube__face--back   { transform: rotateY(180deg) translateZ(80px); }
  .cube__face--right  { transform: rotateY( 90deg) translateZ(80px); }
  .cube__face--left   { transform: rotateY(-90deg) translateZ(80px); }
  .cube__face--top    { transform: rotateX( 90deg) translateZ(80px); }
  .cube__face--bottom { transform: rotateX(-90deg) translateZ(-60px); } 

  .car_body_bottom{
    position: absolute;
    top:0;
    left: 20px;
    width: 120px;
    height: 120px;
    background: rgba(64, 158, 255, 0.2);
    border: 1px solid #fff;
    transform: rotateX(-90deg) translateZ(50px);
  }
  .car_body-front,.car_body-back,.car_body-right,.car_body-left{
    position: absolute;
    top:20px;
    left: 20px;
    width: 120px;
    height: 90px;
    background: linear-gradient(0deg, rgba(64, 158, 255, 0.5), rgba(64, 158, 255, 0.1) 50%);
    border: 1px solid #fff;
  }
  .car_body-front{
    transform: rotateY(  0deg) translateZ(60px);
  }
  .car_body-back {
    transform: rotateY(180deg) translateZ(60px);
  }
  .car_body-right{
    transform: rotateY( 90deg) translateZ(60px);
  }
  .car_body-left {
    transform: rotateY(-90deg) translateZ(60px);
  }

  .hr_front,.hr_back,.hr_right,.hr_left{
    position: absolute;
    top:-70px;
    left: -70px;
    width: 300px;
    height: 100px;
    border-top: solid 1px rgb(64, 158, 255);
    background: linear-gradient(180deg, rgba(64, 158, 255, 0.2), rgba(64, 158, 255, 0));
    animation-name:hr_flash;
    animation-duration:2s; /* 规定动画完成一个周期所花费的秒或毫秒 */
    animation-timing-function:linear; /* 规定动画的速度曲线。默认是 "ease" */
    animation-delay:0s; /* 规定动画何时开始。默认是 0 */
    animation-iteration-count:infinite; /* 规定动画被播放的次数。默认是 1 */
    animation-direction:alternate; /* 规定动画是否在下一周期逆向地播放。默认是 "normal" */
    animation-play-state:running; /* 规定动画是否正在运行或暂停。默认是 "running" */
  }
  @keyframes hr_flash{
    0%   {top:-70px;opacity: 1;height: 100px;}
    50%  {top:200px;opacity: 0;height: 20px;}
    100% {top:-70px;opacity: 1;height: 100px;}
  }
  .hr_front{
    transform: rotateY(  0deg) translateZ(150px);
  }
  .hr_back{
    transform: rotateY(180deg) translateZ(150px);
  }
  .hr_right{
    transform: rotateY( 90deg) translateZ(150px);
  }
  .hr_left{
    transform: rotateY(-90deg) translateZ(150px);
  }
  .hr_red{
    background: #ff3c1a;
  }
  
  .cubeBottom{
    position: absolute;
    top:-20px;
    left: -50px;
    width: 260px;
    height: 260px;
    border-radius: 150px;
    /* background: conic-gradient(red, yellow, green, blue, purple, red); */
    background: conic-gradient(from 90deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 0, 0) 50%);
    /* border: 1px solid #00ff00; */
    transform: rotateX(-90deg);
    animation-name:cubeBottom_flash;
    animation-duration:2s; 
    animation-timing-function:linear; 
    animation-delay:0s; 
    animation-iteration-count:infinite; 
    animation-direction:normal; 
    .cubeBottom_hr{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 130px;
      height: 1px;
      background: #00FF00;
    }
  }
  @keyframes cubeBottom_flash{
    0%   {transform: rotateX(-90deg) rotate(360deg);}
    50%  {transform: rotateX(-90deg) rotate(180deg);}
    100% {transform: rotateX(-90deg) rotate(0deg);}
  }

  .cube2__face {
    position: absolute;
    width: 160px;
    height: 160px;
    background: linear-gradient(30deg, rgba(255, 255, 255, 1), rgb(201, 212, 223));
    border: 2px solid #fff;
  }
  .cube2__face_h {
    top:110px;
    position: absolute;
    width: 160px;
    height: 30px;
    background: #eeeeee;
    border: 1px solid #f0f0f0;
    background: repeating-linear-gradient(45deg, #333333, #333333 5px, #ffc400 5px, #ffc400 10px);
  }
  .cube2__face--front  { transform: rotateY(  0deg) translateZ(80px);}
  .cube2__face--back   { transform: rotateY(180deg) translateZ(80px);}
  .cube2__face--right  { transform: rotateY( 90deg) translateZ(80px);}
  .cube2__face--left   { transform: rotateY(-90deg) translateZ(80px);}
  .cube2__face--top    { transform: rotateX( 90deg) translateZ(-30px);}
  .cube2__face--bottom { transform: rotateX(-90deg) translateZ(60px);} 

}
</style>
<style lang='scss'>
</style>